<template>
    <div class="app-container">
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                    type="primary"
                    plain
                    icon="el-icon-plus"
                    size="mini"
                    @click="handleAdd"
                    >新增
                </el-button>
            </el-col>
        </el-row>
  
        <el-table v-loading="loading" :data="enterpriseList">
            <el-table-column label="名称" prop="companyTypeName" :show-overflow-tooltip="true"/>
            <el-table-column label="标识" prop="companyTypeIdentify" :show-overflow-tooltip="true"/>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
                <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    @click="handleUpdate(scope.row)"
                    >修改
                </el-button>
                <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="handleDelete(scope.row)"
                    >删除
                </el-button>
            </template>
            </el-table-column>
        </el-table>
  
        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />
  
        <!-- 添加或修改企业类型对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false">
            <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                <el-form-item label="名称" prop="companyTypeName">
                    <el-input v-model="form.companyTypeName" placeholder="请输入名称"/>
                </el-form-item>
                <el-form-item label="标识" prop="companyTypeIdentify">
                    <el-input v-model="form.companyTypeIdentify" placeholder="请输入标识"/>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>

    </div>
</template>
  
<script>
import { listCompany, addCompany, updateCompany, delCompany } from '@/api/systemConfig/enterprise'
  
export default {
    name: 'enterprise',
    dicts: [],
    data() {
        return {
            // 遮罩层
            // loading: true,
            loading: false,
            // 总条数
            total: 0,
            // 企业表格数据
            enterpriseList: [],
            // 弹出层标题
            title: '',
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                companyTypeName: [
                    { required: true, message: '名称不能为空', trigger: 'blur' }
                ],
                companyTypeIdentify: [
                    { required: true, message: '标识不能为空', trigger: 'blur' }
                ]
            }
        }
    },
    created() {
      this.getList()
    },
    methods: {
        /** 查询企业列表 */
        getList() {
            this.loading = true
            listCompany(this.queryParams).then(response => {
                this.enterpriseList = response.rows
                this.total = response.total
                this.loading = false
            }
            )
        },

        // 取消按钮
        cancel() {
            this.open = false
            this.reset()
        },

        // 表单重置
        reset() {
            this.form = {
                id: undefined,
                companyTypeName: undefined,
                companyTypeIdentify: undefined
            }
            this.resetForm('form')
        },

        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getList()
        },

        /** 新增按钮操作 */
        handleAdd() {
            this.reset()
            this.open = true
            this.title = '添加企业'
        },

        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset()
            this.form.id = row.id
            this.form.companyTypeName = row.companyTypeName
            this.form.companyTypeIdentify = row.companyTypeIdentify
            this.open = true
            this.title = '修改企业'
        },

        /** 提交按钮 */
        submitForm: function() {
            this.$refs['form'].validate(valid => {
            if (valid) {
                if (this.form.id != undefined) {
                    updateCompany(this.form).then(response => {
                        this.$modal.msgSuccess('修改成功')
                        this.open = false
                        this.getList()
                    })
                } else {
                    addCompany(this.form).then(response => {
                    this.$modal.msgSuccess('新增成功')
                    this.open = false
                    this.getList()
                })
                }
            }
            })
        },

        /** 删除按钮操作 */
        handleDelete(row) {
            this.$modal.confirm('是否确认删除该数据项？').then(function() {
                return delCompany(row.id)
            }).then(() => {
                this.getList()
                this.$modal.msgSuccess('删除成功')
            }).catch(() => {
            })
        },
    }
}
</script>